<html>
    <head>
        <title>D3 History full timespan</title>
        <script type="text/javascript" src="../d3/d3.v2.js"></script>
		<style type="text/css">
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}

			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}
			
			.name {
				text-align: center;
				font-family: sans-serif;
				font-size: 40px;
				color: steelblue;
				padding-top: 20px;
			}
		</style>
		<h1 class="name"><u>History full timespan</u></h1>
    </head>
    <body>
       <script type="text/javascript">
	    /*
		 *create some variables especially the color used in the main bar chart, the scales that are used to make the data
		 *length that fit within the boundaries of the boxes and also to create the axis (same one is used, and therefore it has correct values)
		 **/
			svgWidth = 1200,
			svgHeightHistComt = 450,
			xScale = d3.scale.linear(),
			historyYScale = d3.scale.linear(),
			padding = 40;

			
			
			var loadPath = "../../log/";
					
			//loads all used file EXCEPT the project specific files, they are loaded later in the 'for' loop
			d3.csv(loadPath + "FolderList.csv", function(folders){
			d3.csv(loadPath + folders[folders.length-1].FolderNames +"/History.csv", function(history) {
				svgWidth = history.length*40 + 124;
				var historyHolder = d3.select("body").append("svg").attr("width", svgWidth).attr("height", svgHeightHistComt);
			
				var historyBalancer = d3.min(history, function(d) { return +d.Value >= 0 ? (+d.Value) : (-d.Value); });
					
					historyYScale.domain([historyBalancer-1, d3.max(history, function(d) { return +d.Value >= 0 ? (+d.Value) : (-d.Value); })])
								 .range([svgHeightHistComt - 190, 0]);
					
					//creates the bars in the barchart *CARE WHEN CHANGING THE CODE* small changes may mess up the placing of objects here pretty badly
					//If color of bars is green that would mean that the technical debt is negative, which probably wont happen, probably a bug then... so you know ;)
					var histCol = "red",
						histVal = 0;
					
					for(var h = 0; h < history.length; h++){
						if(+history[h].Value > 0) {
							histCol = "red";
							histVal = +history[h].Value;
						}
						else{
							histCol = "green";
							histVal = (-history[h].Value);
						}
						var rectHoldersHist = historyHolder.append("rect")
										  .attr("x", h*40 + 80)
										  .attr("y", historyYScale(histVal) + padding)
										  .attr("width", 20)
										  .attr("height", svgHeightHistComt - 150 - (padding) - historyYScale(histVal))
										  .attr("fill", histCol);
						
						//cretates the text to the bars (with the date).
						var textHoldersHist = historyHolder.append("text")
										  .attr("transform","rotate(90)")
										  .text( function(){
											var histText = "";
											for(var i = 0; i < 8; i++){
												histText += history[h].Time[i];
											}
											return histText;
										  })
										  .attr("x", svgHeightHistComt - 150 + 10)
										  .attr("y", -((h-1)*40 + 124) );
					}
					
					//the left axis
					historyHolder.append("g")
								.attr("class", "axis")
								.attr("transform", "translate(60, "+ (padding - 1) +")")
								.call(d3.svg.axis()
									.scale(historyYScale)
									.orient("left"));
					
					//right axis
					historyHolder.append("g")
								.attr("class", "axis")
								.attr("transform", "translate("+ ((history.length)*40 + 80) +", "+ (padding - 1) +")")
								.call(d3.svg.axis()
									.scale(historyYScale)
									.orient("right"));
		
			});});
		
	   </script>
	</body>
</html>